<template>
  <div class="index-page">
    <div class="menu-container">
      <ul class="setting-menu">
        <li
          :class="{ active: current === 'basic' }"
          data-type="basic"
          @click="switchSetting('basic')"
        >
          <div class="setting-icon">
            <i class="iconfont icon-category"></i>
          </div>
          <div class="menu-title">基础设置</div>
        </li>
        <li
          :class="{ active: current === 'personal' }"
          data-type="person"
          @click="switchSetting('personal')"
        >
          <div class="setting-icon">
            <i class="iconfont icon-user"></i>
          </div>
          <div class="menu-title">个人资料</div>
        </li>
      </ul>
    </div>
    <div class="setting">
      <div class="basic-info" v-if="currentTab === 'basic'">
        <el-form ref="basicForm" v-model="basicForm" :rules="basicRule">
          <div class="form-item-container avatar-input">
            <div class="left">
              <div class="avatar-area">
                暂无头像
                <img v-if="basicForm.avatar" :src="basicForm.avatar" alt="" />
              </div>
            </div>
            <el-upload
              class="empty-btn"
              action="http://localhost:7001/user/uploadAvatar"
              multiple
              :headers="httpHeader"
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList"
              :on-success="handleSuccess"
              :show-file-list="false"
            >
              更新头像
            </el-upload>
          </div>
          <div class="form-item-container">
            <el-form-item label="昵称" prop="nickName">
              <el-input v-model="basicForm.nickName" placeholder="请输入昵称">
              </el-input>
            </el-form-item>
          </div>
          <div class="form-item-container">
            <el-form-item label="电子邮箱" prop="userEmail">
              <el-input
                v-model="basicForm.userEmail"
                placeholder="请输入电子邮箱"
              >
              </el-input>
            </el-form-item>
          </div>
          <div class="form-item-container">
            <el-form-item label="手机" prop="telephone">
              <el-input v-model="basicForm.telephone" placeholder="请输入手机">
              </el-input>
            </el-form-item>
          </div>
        </el-form>
        <div class="submit-btn" @click="saveBasic">保存</div>
      </div>
      <div class="personal-info" v-if="currentTab === 'personal'">
        <el-form ref="personalForm" v-model="personalForm">
          <div class="form-item-container" style="margin-top: -12px">
            <el-form-item label="性别" prop="gender">
              <el-radio v-model="personalForm.gender" label="1">男</el-radio>
              <el-radio v-model="personalForm.gender" label="2">女</el-radio>
            </el-form-item>
          </div>
          <div class="form-item-container">
            <el-form-item label="个人简介" prop="brief">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入个人简介"
                v-model="personalForm.brief"
              >
              </el-input>
            </el-form-item>
          </div>
          <div class="form-item-container">
            <el-form-item label="个人网站" prop="website">
              <el-input
                v-model="personalForm.website"
                placeholder="请输入个人网站"
              >
              </el-input>
            </el-form-item>
          </div>
        </el-form>
        <div class="submit-btn" @click="savePersonal">保存</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'setting',
  data: () => {
    return {
      current: 'basic',
      currentTab: 'basic',
      basicForm: {},
      basicRule: {
        nickName: [
          { required: true, message: '请设置昵称', trigger: 'blur' },
          {
            min: 3,
            max: 20,
            message: '昵称长度在 1 到 20 个字符',
            trigger: 'blur'
          }
        ]
      },
      personalForm: {},
      vCode: '1123',
      fileList: [],
      httpHeader: {
        authorization: null
      }
    }
  },
  methods: {
    switchSetting (tab) {
      if (tab !== this.currentTab) {
        this.currentTab = tab
        this.current = tab
      }
    },
    getProfile () {
      const that = this
      this.$store.dispatch('GET_PROFILE', {}).then((res) => {
        if (res.status === 200) {
          localStorage.setItem('userInfo', JSON.stringify(res.result))
          const result = JSON.parse(JSON.stringify(res.result))
          that.basicForm = {
            avatar: result.avatar,
            telephone: result.telephone,
            userEmail: result.userEmail,
            nickName: result.nickName
          }
          that.personalForm = {
            gender: result.gender,
            brief: result.brief,
            website: result.website
          }
        }
      })
    },
    saveBasic () {
      const that = this
      this.$store.dispatch('SAVE_USER_INFO', this.basicForm).then((res) => {
        that.$message.success('个人信息保存成功')
        that.getProfile()
      })
    },
    savePersonal () {
      const that = this
      this.$store.dispatch('SAVE_USER_INFO', this.personalForm).then((res) => {
        that.$message.success('个人信息保存成功')
        that.getProfile()
      })
    },
    handleExceed () {
      console.log('文件超出个数限制')
    },
    handleSuccess (res, file, fileList) {
      this.basicForm.avatar = res.result.file
      this.$message.success('头像上传成功')
    }
  },
  created () {
    this.getProfile()
    this.httpHeader.authorization = this.$store.state.token
  }
}
</script>
<style scoped>
.menu-container {
  width: 25%;
  float: left;
  margin-top: 20px;
}
.menu-container .setting-menu > li {
  line-height: 50px;
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
}
.menu-container .setting-menu > li.active {
  background: #f0f0f0;
}
.menu-container .setting-menu > li:hover {
  background: #f0f0f0;
}
.menu-container .setting-menu > li .setting-icon {
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  background: #a0a0a0;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  margin: 0 15px;
}
.menu-container .setting-menu > li .iconfont {
  line-height: 32px;
  vertical-align: top;
}
.menu-container .setting-menu > li .menu-title {
  text-align: left;
  display: inline-block;
  vertical-align: middle;
}
.setting {
  width: 69.2%;
  float: left;
  margin-left: 5.8%;
  margin-top: 20px;
}

.form-item-container {
  border-bottom: 1px solid #f0f0f0;
  padding: 20px 0;
}
.form-item-container:last-child {
  border-bottom: none;
}
.form-item-container /deep/ .el-form-item {
  margin-bottom: 0;
}
.form-item-container /deep/ .el-form-item__label {
  width: 25%;
  text-align: left;
  font-size: 15px;
  color: #969696;
}
.form-item-container /deep/ .el-form-item__content {
  width: 75%;
  float: left;
}
.form-item-container /deep/ .el-form-item__content .el-input {
  width: 250px;
}
.form-item-container /deep/ .el-form-item__content .el-input input {
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  font-size: 15px;
  background: hsla(0, 0%, 71%, 0.1);
  height: 33px;
  line-height: 33px;
}
.form-item-container /deep/ .el-form-item__content .el-textarea textarea {
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  font-size: 15px;
  background: hsla(0, 0%, 71%, 0.1);
  line-height: 33px;
}
.avatar-input {
  padding-top: 0;
  border-bottom: none;
}
.avatar-input .left {
  display: inline-block;
  vertical-align: middle;
  width: 25%;
}
.avatar-area {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  background: #f0f0f0;
  position: relative;
  line-height: 100px;
  text-align: center;
  color: #969696;
}
.avatar-area img {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  position: absolute;
  top: 0;
  left: 0;
}
.empty-btn {
  border: 1px solid #42c02e;
  border-radius: 40px;
  padding: 4px 12px;
  display: inline-block;
  font-weight: 400;
  font-size: 15px;
  color: #42c02e;
  cursor: pointer;
}
.submit-btn {
  width: 100px;
  margin: 30px 0 60px;
  border-radius: 20px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  color: #fff;
  text-align: center;
  background: #3db922;
  cursor: pointer;
}
</style>
